<style>
.add-paper-wrapper {
    width: 1000px;
    background-color: #F7F7F7;
}
.plan-item {
    margin-bottom: 20px;
    background-color: #FFF;

    & h2 {
        padding-left: 25px;
        color: #3A3A63;
        font-size: 16px;
        line-height: 60px;
        border-bottom: 1px solid #E1E7EB;
    }
}
.plan-item-content {
    padding: 30px 60px;
}
.plan-item-content.setting .el-input, .plan-item-content.setting .el-textarea {
    width: 400px;
}

.paper-content-select {
    margin: 0 90px;
    position: relative;
}

.add-subject-btn, .add-options-btn {
    width: 100%;
    position: absolute;
    color: #7485B1;
    font-size: 14px;
    text-align: center;
    border: 1px dashed #E1E7EB;
    line-height: 36px;
    pointer-events: none;

    &::before {
        content: "+";
        margin-right: 10px;
        font-size: 18px;
    }
}

.add-options-btn {
    margin-top: 10px;
    position: static;
    pointer-events: auto;
    cursor: pointer;
}


.single-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    color: #7485B1;
    font-size: 14px;

    & .el-input {
        display: inline-block;
        width: 300px;
        margin-left: 20px;
    }

    & .score-input {
        width: 40px;
        margin-right: 10px;

        & input {
            padding: 0;
            font-size: 14px;
            text-align: center;
        }
    }
}
.single-th {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    position: absolute;
    top: 144px;
    left: 336px;
    color: #909399;
    box-sizing: border-box;
    border-bottom: 1px solid #ebeef5;
    background-color: #F4F7FD;
}
.single-input {
    width: 240px;
    height: 32px;
    padding-left: 10px;
    box-sizing: border-box;
    border-radius: 4px;
    border: 1px solid #c0c4cc;
}
.single-input:focus {
    outline: none;
}
.single-input::placeholder {
    color: #C1C6D4;
}
.single-icon-wrapper {
    display: flex;
    justify-content: space-between;

    & .icons {
        display: none;
    }
}
.single-icon-wrapper:hover .icons {
    display: block;
}

.paper-content {
    padding: 0;
    padding-bottom: 30px;
}
.paper-content ul {
    margin-bottom: 30px;
    counter-reset: c;
}
.paper-content-item {
    padding: 30px 90px;
    margin-bottom: 0;
    position: relative;
    color: #7485B1;
    font-size: 14px;

    & h3 {
        margin-bottom: 30px;

        &::before {
            counter-increment: c;
            content: counter(c) '、';
        }
    }

    & li {
        margin-bottom: 25px;
    }
}
.side-wrapper {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 60px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    border-left: 1px solid #E1E7EB;

    & span {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

    & span:last-child {
        border-top: 1px solid #E1E7EB;
    }
}

.paper-preview-wrapper {
    width: 1000px;
}
.summary {
    color: #7485B1;
    font-size: 14px;

    & li {
        margin-bottom: 30px;
    }

    & span {
        margin-left: 30px;
        color: #3A3A63;
    }
}
</style>

<template>
    <div class="paper-preview-wrapper add-paper-wrapper">
        <div class="plan-item">
            <h2>{{type === 0 ? '试卷' : '问卷'}}概要</h2>
            <div class="plan-item-content summary">
                <ul>
                    <li>
                        考试名称
                        <span v-text="paramObject.examTitle"></span>
                    </li>
                    <li v-if="type === 0">
                        合格分数
                        <span v-text="paramObject.passScore"></span>分
                    </li>
                    <!-- <li v-if="type === 0">
                        知识体系
                        <span>{{infoCateIDName}} </span>
                    </li> -->
                    <li v-if="type === 0">
                        考试时长
                        <span v-text="paramObject.allowCostTime"></span>分钟
                    </li>
                    <li>
                        考试描述
                        <span v-text="paramObject.examDesc"></span>
                    </li>
                </ul>
            </div>
        </div>

        <div class="plan-item">
            <h2>{{type === 0 ? '试卷内容' : '问卷详情'}}</h2>
            <div class="plan-item-content paper-content">
                <ul>
                    <li class="paper-content-item" v-for="(item, index) of subject">

                        <template v-if="item.QuestionType == 2">
                            <h3>【单选题】{{item.QuestionTitle}}</h3>
                            <ol>
                                <li v-for="(items, index) of item.Answers">
                                    <input type="radio" disabled :checked="item.RightAnswerIndexs.split(',').indexOf(String(index)) > -1" v-if ="type== 0 ">
                                    <input type="radio" disabled v-if="type==1">
                                    {{items.AnswerValue | format(index)}}
                                </li>
                            </ol>
                        </template>

                        <template v-if="item.QuestionType == 1">
                            <h3>【多选题】{{item.QuestionTitle}}</h3>
                            <ol>
                                <li v-for="(items, index) of item.Answers">
                                    <input type="radio" disabled :checked="item.RightAnswerIndexs.split(',').indexOf(String(index)) > -1" v-if =" type==0 ">
                                    <input type="radio" disabled  v-if=" type==1 ">
                                    {{items.AnswerValue | format(index)}}
                                </li>
                            </ol>
                        </template>

                        <template v-if="item.QuestionType == 3">
                            <h3>【问答题】{{item.QuestionTitle}}</h3>
                            <el-input type="textarea" resize="none" :rows="4" placeholder="请输入" disabled></el-input>
                        </template>
                    </li>
                </ul>
            </div>
        </div>

        <div class="plan-item" v-if="type === 0">
            <h2>试卷合计</h2>
            <div class="plan-item-content paper-total">
                <el-table :data="questions" show-summary header-cell-class-name="plan-item-th" :header-cell-style="{backgroundColor: '#F4F7FD'}">
                    <el-table-column prop="name" label="名称"></el-table-column>
                    <el-table-column prop="number" label="题数"></el-table-column>
                    <el-table-column prop="RightScore" label="分值"></el-table-column>
                </el-table>
            </div>
        </div>


    </div>
</template>

<script>
    import qs from 'qs'

    export default {
        data() {
            return {
                type: 0,

                name: '',
                score: '',
                classify: '',
                time: '',
                desc: '',
                paramObject:{},
                subject: [],
                questions:[],
                paperType:[],

            }
        },

        computed: {
            paperTotal() {
                const temp = []

                this.subject.forEach((item) => {
                    if (item.type === 0) {
                        const obj = temp.find((item) => item.name === '单选题')

                        if (obj) {
                            obj.num++
                            !!item.score && (obj.score += item.score)
                        } else {
                            temp.push({
                                name: '单选题',
                                score: item.score,
                                num: 1
                            })
                        }
                    }

                    if (item.type === 1) {
                        const obj = temp.find((item) => item.name === '多选题')

                        if (obj) {
                            obj.num++
                            !!item.score && (obj.score += item.score)
                        } else {
                            temp.push({
                                name: '多选题',
                                score: item.score,
                                num: 1
                            })
                        }
                    }

                    if (item.type === 2) {
                        const obj = temp.find((item) => item.name === '问答题')

                        if (obj) {
                            obj.num++
                        } else {
                            temp.push({
                                name: '问答题',
                                score: 0,
                                num: 1
                            })
                        }
                    }
                })

                return temp
            }
        },

        filters: {
            format(value, index) {
                const temp = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'G']

                return `${temp[index]}、${value}`
            }
        },

        watch: {
            '$route': 'getData'
        },

        //
        created() {
            this.getData()



            this.ExamLibID = this.$route.query.ExamLibID
            this.type = this.$route.query.type

            if(this.type == 0) {
                this.getLib().then((value)=>{
                    this.subject = value.questions
                    this.paramObject = value
                    this.getText()

                    // this.getTestPaperInfoCateList()
                })

                this.path = [
                        {
                            name:'效果评估',
                            path:'/effect/test-papers'
                        },
                        {
                            name:'试卷库',
                            path:"/effect/test-papers"
                        },
                        {
                            name:'试卷详情'
                        }
                    ]


            } else {
                this.getQNRResult().then((value)=>{
                    this.subject = value.questions
                    this.paramObject = value
                    this.getText()
                })

                this.path = [
                        {
                            name:'效果评估',
                            path:'/effect/test-papers'
                        },
                        {
                            name:'问卷库',
                            path:"/effect/survey"
                        },
                        {
                            name:'问卷详情'
                        }
                    ]
            }


            // 设置面包屑
            this.$store.commit('setPath', this.path)

        },


        methods: {
            getData() {
                const temp = JSON.parse(localStorage.getItem('paperPreview'))

                if (! temp) {
                    return
                }

                this.name = temp.form.examName
                this.classify = temp.form.classify

                this.score = temp.formSetting.score
                this.time = temp.formSetting.time
                this.desc = temp.formSetting.desc

                this.subject = temp.subject
            },
            cancelPreview() {
                this.$router.go(-1)

                // localStorage.removeItem('paperPreview')
            },

            getText() {
                // 1:多选 2:单选 3:内容型
                let temp = []
                this.subject.forEach((value, index)=>{

                    if( value.QuestionType == 1) {
                        if(!this.questions[0]) {
                            this.questions[0] =  {
                                number:1,
                                RightScore:Number(value.RightScore),
                                name:"多选题"
                            }
                        } else {

                            this.questions[0].number += 1
                            this.questions[0].RightScore = Number(this.questions[0].RightScore) + value.RightScore
                        }
                    }

                    if( value.QuestionType == 2) {

                        if(!this.questions[1]) {
                            this.questions[1] =  {
                                number:1,
                                RightScore:Number(value.RightScore),
                                name:"单选题"
                            }
                        } else {
                            this.questions[1].number += 1
                            this.questions[1].RightScore = Number(this.questions[1].RightScore) + value.RightScore
                        }
                    }

                    if( value.QuestionType == 3) {
                        if(!this.questions[2]) {
                            this.questions[2] =  {
                                number:1,
                                RightScore:Number(value.RightScore),
                                name:"问答题"
                            }
                        } else {
                            this.questions[2].number += 1
                            this.questions[2].RightScore = Number(this.questions[2].RightScore) + value.RightScore
                        }
                    }

                })

                this.questions  =  this.questions.filter(value => !!value)

            },


            // 获取试卷体系
            // getTestPaperInfoCateList() {
            //     axios.post('/com/info-cates/list').then((res) => {
            //         var d = res.data
            //         if(d.flag == 1){
            //             //获取下拉数据
            //             this.paperType = d.data.InfoCateList

            //             this.paperType.forEach((v)=>{
            //                 if(this.paramObject.infoCateID == v.InfoCateID) {
            //                     this.infoCateIDName = v.CateName
            //                 }
            //             })

            //         }else {
            //             this.$message.error(d.msg)
            //         }
            //     })
            // },

            async getLib() {
                const {data} = await axios.post('/com/exam/getLib', qs.stringify({
                    examLibID: this.ExamLibID
                }))

                return data.data
            },


            async getQNRResult() {
                const {data} = await axios.post('/com/exam/getQNRLib', qs.stringify({
                    examLibID: this.ExamLibID
                }))

                return data.data
            },
        }
    }
</script>
